<template>
	<view class="demo">
		<!-- 海报 -->
		<u-mask :show="show">
			<view class="warp">
				<canvas v-if="stat" class="canvas" canvas-id="myCanvas"></canvas>
			</view>
			<view class="botPos ">
				<view class="f f-j-e p-t-20">
					<button @click="btn1" class="f f-a-c f-d-c f-j-c" :plain="true">
						<view class="weChat f f-a-c f-d-c f-j-c">
							<image src="/static/scher/wecat.png" class="weCath" mode=""></image>
							<view class="weiName">
								微信好友
							</view>
						</view>
					</button>
					<button @click="btn2" class="f f-a-c f-d-c f-j-c" :plain="true">
						<view class="friends  f f-a-c f-d-c f-j-c">
							<image src="/static/scher/3.png" class="weCath" mode=""></image>
							<view class="weiName">
								朋友圈
							</view>
						</view>
					</button>
					<button @click="btn3" class="f f-a-c f-d-c f-j-c" :plain="true">
						<view class="album f f-a-c f-d-c f-j-c">
							<image src="/static/scher/load.png" class="weCath" mode=""></image>
							<view class="weiName">
								保存到相册
							</view>
						</view>
					</button>
				</view>
				<view class="xian"></view>
				<view @click="clone" class="off">
					关闭
				</view>
			</view>
		</u-mask>
		<u-mask :show="shows" @click="shows = false">
			<view class="backDian b-f f f-a-c f-j-c">
				点击 <image src="/static/dian.png" class="dian m-l-20 m-r-20" mode=""></image> 进行分享
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				stat: true,
				shows: false,
				show: true,
				img: '/static/scher/1.png',
				imgAva: uni.getStorageSync('userinfo').avatar,
				posterImage: '',
				bg: '/static/scher/10.png',
				imgUrl: '',
				img: '',
				name: uni.getStorageSync('userinfo').nickname
			}
		},
		onLoad() {
			//qweqewqweweqweqqweewqewqwewqeewqwqeqwe  
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		mounted() {
			this.init()
			// this.initCode()
		},
		methods: {
			// async initCode() {
			// 	let n = await this.$api.Qrcode()
			// 	this.imgUrl = n.data.url
			// },
			clone() {
				// this.show = false
				this.stat = false
				this.$emit('cloneR')
			},
			// 点击分享
			btn1() {
				let _this = this
				wx.downloadFile({
					url: _this.posterImage,
					success: res => {
						wx.showShareImageMenu({
							path: res.tempFilePath,
						})
						this.clone()
					},
					fail: err => {},
				})
			},
			// 点击分享朋友圈
			btn2() {
				this.show = false
				this.shows = true
			},
			// /保存到图片
			btn3() {
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImage,
					success: () => {
						this.clone();
						uni.showToast({
							position: "center", //
							icon: "none",
							title: "图片保存成功，请到手机相册查看"
						})

					},
					fail(e) {
						uni.showModal({
							content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg +
								"，errSubject：" + e.errSubject,
							showCancel: false
						});
					}
				})
			},
			init() {
				let n = await this.$api.Qrcode()
				this.imgUrl = n.data.url
				console.log(this.imgUrl, '123456');
				let ctx = uni.createCanvasContext('myCanvas', this);
				ctx.drawImage(this.bg, 0, 0, 250, 400)
				ctx.drawImage(this.imgUrl, 10, 10, 230, 300)
				// ctx.draw()
				// ctx.clearRect(10, 10, 150, 75)
				ctx.drawImage(this.imgAva, 10, 330, 48, 48)
				ctx.drawImage(this.imgUrl, 175, 325, 60, 60)
				ctx.setFontSize(18)
				ctx.fillText(this.name, 70, 360)
				ctx.draw()
				setTimeout(() => {
					// 将canvas转换成图片
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						canvasId: 'myCanvas',
						fileType: 'png',
						quality: 1,
						success: (success) => {
							this.posterImage = success.tempFilePath
							this.img = success.tempFilePath
							console.log(img, '888888888888');
							uni.hideLoading()
						},
						fail: (e) => {
							uni.showToast({
								title: '海报生成失败',
								icon: 'none'
							})
							this.close()
							console.log('eeee', e)
						}
					}, this)
				}, 500)

			},
		},
	}
</script>
<style lang="scss" scoped>
	.backDian {
		position: absolute;
		top: 180rpx;
		right: 30rpx;
		width: 276rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 12rpx;

		// margin-top: 100rpx;
		.dian {
			width: 38rpx;
			height: 12rpx;
		}
	}

	button {
		padding: 0;
		margin: 0;
		border: none;
	}

	.off {
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		margin-top: 15rpx;
	}

	.botPos {
		position: absolute;
		width: 100%;
		height: 400rpx;
		background-color: #f6f6f6;
		bottom: 0;
		left: 0;
		border-radius: 40rpx;
		// padding: 20rpx;
		align-items: baseline;

		.xian {
			height: 2rpx;
			width: 100%;
			background-color: #e6e6e6;
			margin: 20rpx 0;
		}

		.weiName {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #333333;
			margin-top: -10rpx;
		}

		.weCath {
			width: 86rpx;
			height: 86rpx;
		}

	}

	.demo {
		overflow-y: auto;
	}

	.canvas {
		width: 250px;
		height: 400px;
		// background-color: #fff;
	}

	.warp {
		position: absolute;
		// width: 250px;
		// height: 400px;
		// background-color: #fff;
		left: 55%;
		top: 20%;
		transform: translateX(-50%);
	}
</style>